AULA 08 - Canvas¶


AGENDA¶

  • Desenhando com Canvas
  • Animação com Javascript
  • Usando XML e CSS
  • Perguntas

1. Desenhando com canvas¶

  • Para aprofundamento, consulte o MDN Web Docs - Tutorial.

1.1. Canvas¶

  • O canvas é um elemento novo em HTML5, lançado em 2013, que permite que se desenhem elementos gráficos usando Javasccript.
  • Utilizado para renderizar texto, imagens, gráficos, linhas gradientes e outros efeitos dinamicamente.
  • Desenhar na tela se dá através da API de tela 2D. Essa API contém uma variedade de funções que fornecem o poder de se desenhar praticamente o que se queira na tela.

1.2. Estrutura básica do Canvas¶

  • Caso não seja definido a largura ou altura do elemento canvas, o atributo de largura padrão é 300 e o atributo de altura padrão é 15.
  • O elemento <canvas> pode ser estilizado como qualquer imagem.
  • Porque usar as definições de largura e altura na própria tag do canvas ? E não no CSS ?

    • Se utilizarmos o CSS, o elemento pode ser redimensionado, mas durante a renderização a imagem é escalonada para caber no tamanho do layout. Logo, é distorcida.
    • Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no <canvas> e não usando CSS. Stackoverflow.

      • Atualização da Especificação HTML5 - Canvas de 15 de julho de 2020: HTML - Living Standard >> 4.12.5 The canvas element.

      • É uma tag similar as demais <div>, <table> com exceção do conteúdo que são renderizados com javascript.

  • Em outras palavras, devemos incluir a tag <canvas> </canvas> em nosso arquivo index.html, e criar uma função inicializadora para acessar o canvas quando a página é carregada, e usar a API para desenhar a visualização.
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let context = canvas.getContext("2d");

  // Inserir seu código js aqui
};

1.3. Desenhando formas simples¶

1.3.1. Retângulos¶

Nome Função Descrição Retorno
clearRect(a, b, c, d) Limpa um retângulo específico. Não há retorno algum.
fillRect(a, b, c, d) Desenha um retângulo preenchido. Não há retorno algum.
strokeRect(a, b, c, d) Desenha um retângulo não preenchido. Não há retorno algum.

1.3.1.1. Exemplo de Linhas e Retângulos¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let x = 10;
  let y = 50;
  let count = 5;

  for (let i = 0; i < count; i++) {
    ctx.fillRect(i * (x + y) + x, x, y, y);
    ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
    ctx.clearRect(i * (x + y) + x, x + 5, y, y - 10);
  }
};
Fonte: Autoria própria

Definindo estilos¶

Nome Função Descrição Valores padrões
fillStyle Define o estilo utilizado para preencher as formas. black
lineJoin Define o estilo utilizado para uniões de linhas. miter
lineWidth Define a espessura das linhas. 1.0
strokeStyle Define o estilo utilizado para linhas. black

1.3.1.2. Exemplo com Espessuras de Linhas¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  ctx.lineWidth = 4;
  ctx.strokeRect(10, 10, 50, 50);
  ctx.lineWidth = 6;
  ctx.strokeRect(70, 10, 50, 50);
  ctx.lineWidth = 8;
  ctx.strokeRect(130, 10, 50, 50);
  ctx.lineWidth = 10;
  ctx.strokeRect(190, 10, 50, 50);
};
Fonte: Autoria própria

1.3.1.3. Exemplo com Junções de Linhas¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  ctx.lineWidth = 20;
  ctx.lineJoin = "round";
  ctx.strokeRect(20, 20, 100, 100);
  ctx.lineJoin = "bevel";
  ctx.strokeRect(160, 20, 100, 100);
  ctx.lineJoin = "miter";
  ctx.strokeRect(300, 20, 100, 100);
};
Fonte: Autoria própria

1.3.1.4. Exemplo com Preenchimento¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let x = 10;
  let y = 50;
  let count = 5;
  ctx.lineWidth = 3;
  let interiorCores = ["black", "blue", "gray", "red", "green"];
  let linhasCores = ["rgb(0, 0, 0)", "rgb(100, 100, 100)", "rgb(0, 0, 255)", "rgb(255, 0, 0)", "rgb(0, 255, 0)"];

  for (let i = 0; i < count; i++) {
    ctx.fillStyle = interiorCores[i];
    ctx.strokeStyle = linhasCores[i];
    ctx.fillRect(i * (x + y) + x, x, y, y);
    ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
};
Fonte: Autoria própria

Definindo Gradientes¶

Nome Função Descrição Retorno
createLinearGradient(x0, y0, x1, y1) Cria um gradiente linear. CanvasGradient
createRadialGradient(x0, y0, r0, x1, y1, r1) Cria um gradiente radial. CanvasGradient
addColorStop(position, cor) Adiciona cores sólidas a linhas gradientes. Não retorna nada.

1.3.1.5. Exemplo com Gradientes Linear¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(0, 0, 500, 140);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(0, 0, 500, 140);
};
Fonte: Autoria própria

1.3.1.6. Exemplo com Gradientes Radial¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(0, 0, 500, 140);
};
Fonte: Autoria própria

1.3.1.7. Exemplo com Gradientes Linear e Radial¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(250, 70, 200, 160);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(150, 20, 75, 100);
  ctx.lineWidth = 8;
  ctx.strokeStyle = gradiente;
  ctx.strokeRect(250, 20, 75, 100);

  let gradienteR = ctx.createRadialGradient(250, 150, 20, 200, 100, 100);
  gradienteR.addColorStop(0, "green");
  gradienteR.addColorStop(0.3, "blue");
  gradienteR.addColorStop(0.5, "white");
  gradienteR.addColorStop(0.7, "orange");
  gradienteR.addColorStop(1, "red");
  ctx.fillStyle = gradienteR;
  ctx.fillRect(150, 150, 75, 100);
  ctx.lineWidth = 8;
  ctx.strokeStyle = gradienteR;
  ctx.strokeRect(250, 150, 75, 100);
};
Fonte: Autoria própria

Definindo Padrões¶

Nome Função Descrição
createPattern(imagem, repeticao) Cria um padrão conforme a imagem passada.
repeat A imagem será repetida na vertical e horizontal.
repeat-x A imagem será repetida somente na horizontal.
repeat-y A imagem será repetida somente na vertical.
no-repeat A imagem será repetida não será repetida.

1.3.1.8. Exemplo com Padrões¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <img src="bola.jpg" hidden id="bola">    <!-- Adicionado -->
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let imagemElemento = document.getElementById("bola");
  let padrao = ctx.createPattern(imagemElemento, "repeat");  /* propriedade a ser modificada */
  ctx.fillStyle = padrao;
  ctx.fillRect(0, 0, 500, 140);
};
let padrao = ctx.createPattern(imagemElemento, "repeat");
Fonte: Autoria própria
let padrao = ctx.createPattern(imagemElemento, "repeat-x");
Fonte: Autoria própria
let padrao = ctx.createPattern(imagemElemento, "repeat-y");
Fonte: Autoria própria
let padrao = ctx.createPattern(imagemElemento, "no-repeat");
Fonte: Autoria própria

1.3.1.9. Exemplo com Padrões em formas geométricas¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <img src="bola.jpg" hidden id="bola">    <!-- Adicionado -->
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let imagemElemento = document.getElementById("bola");
  let padrao = ctx.createPattern(imagemElemento, "repeat");
  ctx.fillStyle = padrao;
  ctx.fillRect(50, 16, 180, 165);
  ctx.lineWidth = 20;
  ctx.strokeStyle = padrao;
  ctx.strokeRect(350, 20, 175, 150);

};
Fonte: Autoria própria

Salvando e Restaurando Estados¶

Nome Função Descrição
save() Salva os valores para as propriedades do estado do desenho e os organiza na pilha de estados.
restore() Pega o primeiro conjunto de valores da pilha de estados e os utiliza para definir o estado de desenho.

1.3.1.10. Exemplo com Save e Restore¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <div>                                 <!-- Adicionado -->
    <button>Save</button>               <!-- Adicionado -->
    <button>Restore</button>            <!-- Adicionado -->
  </div>                                <!-- Adicionado -->  
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(500, 0, 500, 140);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  let interiorCores = ["black", gradiente, "blue", "gray", "red", "green", "grey"];
  let indexador = 0;
  ctx.fillStyle = interiorCores[indexador];
  draw();
  let botoes = document.getElementsByTagName("button");
  for (let i = 0; i < botoes.length; i++) {
    botoes[i].onclick = botaoPress;
  }

  function botaoPress(e) {
    switch (e.target.innerHTML) {
      case 'Save':
        ctx.save();
        indexador = (indexador + 1) % interiorCores.length;
        ctx.fillStyle = interiorCores[indexador];
        draw();
        break;

      case 'Restore':
        indexador = Math.max(0, indexador-1);
        ctx.restore();
        draw();
        break;
    }
  }

  function draw() {
    ctx.fillRect(0, 0, 500, 140);
  }
};
  • Ao pressionar o botão Save, a cor é modificada para outra contida no array interiorCores. E se for pressionado o Restore, ele exibe a cor anterior salva.
Fonte: Autoria própria

DrawImage¶

Nome Função Descrição
drawImage(imagem, x, y) Desenha a imagem a partir das coordenadas (x, y).
Existem outras combinações para drawImage().
Os 3o. e 4o. parâmetros opcionais do método drawImage() controlam a escala da imagem.

1.3.1.11. Exemplo com Desenhando Imagens a partir de Video¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
    <video id="vid" src="timessquare.webm" controls preload="auto" width="360" height="240"></video>
    <div>
        <button id="pressme">Tirar Foto</button>
    </div>
    <canvas id="myCanvas" width="360" height="240"></canvas>

  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
  float: left;
}
/* Arquivo js.js - Modificado */
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  let imagemElemento = document.getElementById("vid");

  /* Inserir seu código aqui */
  document.getElementById("pressme").onclick = function (e) {
    ctx.drawImage(imagemElemento, 0, 0, 360, 238);
  }
};
  • Enquanto o video está sendo executado, ao pressionar o botão Foto, as imagens são capturadas e exibidas no canvas à direita.
Fonte: Autoria própria

1.3.1.12. Exemplo com Desenhando Imagens sobre um Video¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
  <video id="vid" src="timessquare.webm" controls auto width="360" height="240"></video>
  <canvas id="myCanvas" width="360" height="240"></canvas>

<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
  float: left;
}
/* Arquivo js.js - Modificado */
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  let imagemElemento = document.getElementById("vid");

  /* Inserir seu código aqui */
  let width = 100;
  let height = 10;
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";

  setInterval(function () {
    ctx.drawImage(imagemElemento, 0, 0, 360, 238);
    ctx.strokeRect(180 - (width/2), 120 - (height/2), width, height);
  }, 25);

  setInterval(function () {
    width = (width + 1) % 200;
    height = (height + 3) % 200;
  }, 100);
};
  • Enquanto o video está sendo executado à esquerda, o mesmo é reproduzido à direita porém, com um desenho de canvas sobre ele.
Fonte: Autoria própria Fonte: Autoria própria

1.3.1.13. Exemplo Unindo as variações anteriores¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
  <div>
    <video id="vid" src="timessquare.webm" controls autoplay width="360" height="240"></video>
  </div>
  <div>
    <canvas id="myCanvas1" width="360" height="240"></canvas>
    <button id="pressme">Foto</button>
    <canvas id="myCanvas2" width="360" height="240"></canvas>
  </div>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Arquivo js.js - Modificado */
  let srcCanvas = document.getElementById("myCanvas1");
  let ctx1 = srcCanvas.getContext("2d");
  let ctx2 = document.getElementById("myCanvas2").getContext("2d");
  let imagemElemento = document.getElementById("vid");

  document.getElementById("pressme").onclick = takePicture;

  /* Inserir seu código aqui */
  let width = 100;
  let height = 10;
  ctx1.lineWidth = 5;
  ctx1.strokeStyle = "red";
  ctx2.lineWidth = 30;
  ctx2.strokeStyle = "black";

  setInterval(function () {
    ctx1.drawImage(imagemElemento, 0, 0, 360, 240);
    ctx1.strokeRect(180 - (width/2), 120 - (height/2), width, height);
  }, 25);

  setInterval(function () {
    width = (width + 1) % 200;
    height = (height + 3) % 200;
  }, 100);

  function takePicture() {
    ctx2.drawImage(srcCanvas, 0, 0, 360, 240);
    ctx2.strokeRect(0, 0, 360, 240);
  }
};
  • Enquanto o video está sendo executado à esquerda, o mesmo é reproduzido à abaixo, à esquerda com um desenho sobre, e à direita será exibido a foto ao pressionar o botão foto.
Fonte: Autoria própria

Criando caminhos Path¶

Nome Função Descrição
beginPath() Inicia um novo caminho.
closePath() Fecha um caminho existente da primeira linha desenhada até a última.
fill() Preenche as formas de subpaths.
isPointInPath(x, y) Retorna verdadeiro se o ponto existe no caminho da forma desenhada.
lineTo(x, y) Desenha uma subPath com as coordenadas indicadas.
moveTo(x, y) Posiciona o cursor na coordenada especidicada.
rect(x, y, w, z) Desenha um retângulo com início nos pontos (x, y), e com final nas coordenadas (w, z).
stroke() Desenha a linha externa das formas.

Outras Propriedades¶

Nome Função Descrição
font = "bold 12px sans-serif" Pode ser qualquer coisa que você colocaria na regra font do CSS.
Incluindo font style, font variant, font weight, font size, line height, e font family.
textAlign = "right" Controla o alinhamento do texto. É parecido (mas não idêntico) a regra text-align do CSS.
Os possíveis valores são start, end, left, right, e center.
textBaseline = "bottom" Controla onde o texto é desenhado relativo ao ponto de início.
Os possíveis valores são top, hanging, middle, alphabetic, ideographic, ou bottom.
fillText(conteudo, posicao x, posicao y) desenha o texto de fato.

1.3.1.14. Exemplo Desenhando Linhas¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Desenhando com Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <canvas id="myCanvas" width="500" height="600">Sem suporte a canvas</canvas>
    <script src="js/js1.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
#myCanvas {
      border : 10px solid #555
    }
/* Arquivo js.js - Modificado */
    let canvas = document.getElementById("myCanvas1");
    let ctx = canvas.getContext("2d");

    //Desenhando linhas verticais
    for (let x = 0.5; x < 500; x += 10)
    {
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 600);
    }
    //Desenhando linhas horizontais
    for (let y = 0.5; y < 600; y += 10)
    {
      ctx.moveTo(0, y);
      ctx.lineTo(600, y);
    }

    ctx.strokeStyle = "#eee";
    ctx.stroke();

    // Desenhando uma seta na Horizontal
    ctx.beginPath();
    ctx.moveTo(0, 40);
    ctx.lineTo(240, 40);
    ctx.moveTo(260, 40);
    ctx.lineTo(500, 40);
    ctx.moveTo(495, 35);
    ctx.lineTo(500, 40);
    ctx.lineTo(495, 45);

    // Desenhando uma seta na Vertical
    ctx.moveTo(60, 0);
    ctx.lineTo(60, 153);
    ctx.moveTo(60, 173);
    ctx.lineTo(60, 375);
    ctx.moveTo(65, 370);
    ctx.lineTo(60, 375);
    ctx.lineTo(55, 370);

    ctx.strokeStyle = "#000";
    ctx.stroke();


    //Desenhando x, y, e as coordenadas
    ctx.font = "bold 12px sans-serif";
    ctx.fillText("x", 248, 43);
    ctx.fillText("y", 58, 165);

    ctx.textBaseline = "top";
    ctx.fillText("( 0 , 0 )", 8, 5);

    ctx.textAlign = "right";
    ctx.textBaseline = "bottom";
    ctx.fillText("( 500 , 375 )", 492, 370);
};
Fonte: Autoria própria

2. Animação com Javascript¶

  • Para visualizar exemplos, consulte Javascript.info.

3. Usando XML com CSS¶

<!-- Arquivo index.xml --> 

<?xml version="1.0"?>
<!-- XML demonstration -->

<?xml-stylesheet type="text/css" href="estilo.css"?>

<!DOCTYPE planet>
<planet>

<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>

<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>

<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>

</planet>
/* Arquivo estilo.css */
/* ** XML demonstration ** */

planet:before {
  display: block;
  width: 8em;
  font-weight: bold;
  font-size: 200%;
  content: "Oceans";
  margin: -.75em 0px .25em -.25em;
  padding: .1em .25em;
  background-color: #cdf;
  }

planet {
  display: block;
  margin: 2em 1em;
  border: 4px solid #cdf;
  padding: 0px 1em;
  background-color: white;
  }

ocean {
  display: block;
  margin-bottom: 1em;
  }

name {
  display: block;
  font-weight: bold;
  font-size: 150%;
  }

area {
  display: block;
  }

area:before {
  content: "Area: ";
  }

area:after {
  content: " million km\B2";
  }

depth {
  display: block;
  }

depth:before {
  content: "Mean depth: ";
  }

depth:after {
  content: " m";
  }
Fonte: Autoria própria

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.
  • Criando Formulários a partir do objeto MDN Web Docs - FormData.
  • Dive into HTML5.
  • HTML5 Canvas Tutorials.
  • MDN Web Docs - Canvas Tutorial.
  • MDN Web Docs - CanvasRenderingContext2D.
  • [ADDISON, W.] - HTML5 Guidelines for Web Developers - Junho 2011
  • [FREEMAN, A.] - The Definitive Guide to HTML5 - Editora Apress
  • [SILVA, O. J.] - HTML 4.0 e XHTML 1.0 Domínio e Transição - Editora Erica.


ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>